<template>
  <a-image
    :src="imgUrl"
    :width="props.width"
    :height="props.height"
    fallback=""
  />
</template>

<script lang="ts">
import { defineComponent, defineProps, ref } from "vue";

defineComponent({
  name: "CommonImage",
});
</script>
<script lang="ts" setup>
import { watchEffect } from "vue";

const props = defineProps({
  url: {
    type: String,
  },
  width: {
    type: Number,
    default: 30,
  },
  height: {
    type: Number,
    default: 30,
  },
});
const imgUrl = ref();
watchEffect(() => {
  imgUrl.value = undefined;
  if (props.url) {
    setTimeout(() => {
      fetch(props.url || "", {
        method: "get",
      })
        .then((response) => response.blob())
        .then((blob) => {
          const url = URL.createObjectURL(blob);
          imgUrl.value = url;
        });
    }, 0);
  }
});
</script>

<style scoped></style>
